<template>
	<view style="padding-bottom: 80rpx;">
		<view class="borderView">

			<view class="headText">表1</view>


			<view>

				<view class="formView">
					<view>姓名:</view>
					<view class="inputView">
						<input type="text" />
					</view>
				</view>


				<view class="formView">
					<view>性别:</view>
					<view class="inputView" style="border: none;">
						<radio-group @change="RadioChange">
							<radio class="blue" :class="radio=='男'?'checked':''" :checked="radio=='男'?true:false"
								value="男" style="transform: scale(0.7);"></radio>男
							<radio class="blue" :class="radio=='女'?'checked':''" :checked="radio=='女'?true:false"
								value="女" style="margin-left: 10rpx;transform: scale(0.7);"></radio>女
						</radio-group>
					</view>
				</view>



				<view class="formView">
					<view>身份证号:</view>
					<view class="inputView">
						<input type="text" />
					</view>
				</view>
				<hr style="margin: 0 30rpx;margin-top: 60rpx;" />

			</view>


			<view class="radioView">
				<view class="radioFont">文化程度：</view>

				<view>
					<radio-group @change="RadioCulture">
						<view>
							<radio class="blue" :class="Culture=='小学'?'checked':''" :checked="Culture=='小学'?true:false"
								value="小学" style="transform: scale(0.7);margin-right: 20rpx;"></radio>小学
						</view>

						<view style="margin-left: -10rpx;margin-top: 10rpx;">
							<radio class="blue" :class="Culture=='初中'?'checked':''" :checked="Culture=='初中'?true:false"
								value="初中" style="margin-left: 10rpx;transform: scale(0.7);margin-right: 20rpx;">
							</radio>初中
						</view>


						<view style="margin-left: -10rpx;margin-top: 10rpx;">
							<radio class="blue" :class="Culture=='高中'?'checked':''" :checked="Culture=='高中'?true:false"
								value="高中" style="margin-left: 10rpx;transform: scale(0.7);margin-right: 20rpx;">
							</radio>高中
						</view>

					</radio-group>

				</view>
			</view>

			<hr style="margin: 0 30rpx;margin-top: 50rpx;" />
			<view class="radioView">
				<view class="radioFont">职业：</view>
				<view>
					<radio-group @change="RadiooCCupation">
						<view>
							<radio class="blue" :class="CCupation=='学生'?'checked':''"
								:checked="CCupation=='学生'?true:false" value="学生"
								style="transform: scale(0.7);margin-right: 20rpx;"></radio>学生
						</view>
						<view style="margin-left: -10rpx;margin-top: 10rpx;">
							<radio class="blue" :class="CCupation=='老师'?'checked':''"
								:checked="CCupation=='老师'?true:false" value="老师"
								style="margin-left: 10rpx;transform: scale(0.7);margin-right: 20rpx;">
							</radio>老师
						</view>
						<view style="margin-left: -10rpx;margin-top: 10rpx;">
							<radio class="blue" :class="CCupation=='工人'?'checked':''"
								:checked="CCupation=='工人'?true:false" value="工人"
								style="margin-left: 10rpx;transform: scale(0.7);margin-right: 20rpx;">
							</radio>工人
						</view>
					</radio-group>
				</view>
			</view>

			<hr style="margin: 0 30rpx;margin-top: 50rpx;" />
			<view class="radioView">
				<view class="radioFont">婚姻状况：</view>
				<view>
					<radio-group @change="RadioMarriagee">
						<view>
							<radio class="blue" :class="Marriagee=='未婚'?'checked':''"
								:checked="Marriagee=='未婚'?true:false" value="未婚"
								style="transform: scale(0.7);margin-right: 20rpx;"></radio>未婚
						</view>

						<view style="margin-left: -10rpx;margin-top: 10rpx;">
							<radio class="blue" :class="Marriagee=='已婚'?'checked':''"
								:checked="Marriagee=='已婚'?true:false" value="已婚"
								style="margin-left: 10rpx;transform: scale(0.7);margin-right: 20rpx;">
							</radio>已婚
						</view>

					</radio-group>

				</view>
			</view>

			<hr style="margin: 0 30rpx;margin-top: 50rpx;" />






			<view class="radioView">
				<view class="radioFont">上次随访至今是否出现以下症状：</view>

				<view>
					<radio-group @change="RadioFollow" style="width: 100%;">

						<view style="display: flex;justify-content: space-between;padding-right: 120rpx;">
							<view>
								<radio class="blue" :class="follow=='没有症状'?'checked':''"
									:checked="follow=='没有症状'?true:false" value="没有症状"
									style="transform: scale(0.7);margin-right: 20rpx;"></radio>没有症状
							</view>

							<view style="">
								<radio class="blue" :class="follow=='咳嗽咳痰'?'checked':''"
									:checked="follow=='咳嗽咳痰'?true:false" value="咳嗽咳痰"
									style="margin-left: 10rpx;transform: scale(0.7);margin-right: 20rpx;"></radio>咳嗽咳痰
							</view>
						</view>
						<view
							style="display: flex;justify-content: space-between;;margin-top: 20rpx;padding-right: 120rpx;">
							<view style="margin-left: -10rpx;">
								<radio class="blue" :class="follow=='低热盗汗'?'checked':''"
									:checked="follow=='低热盗汗'?true:false" value="低热盗汗"
									style="margin-left: 10rpx;transform: scale(0.7);margin-right: 20rpx;"></radio>低热盗汗
							</view>
							<view style="">
								<radio class="blue" :class="radio=='浑身无力'?'checked':''"
									:checked="follow=='浑身无力'?true:false" value="浑身无力"
									style="margin-left: 10rpx;transform: scale(0.7);margin-right: 20rpx;"></radio>浑身无力
							</view>
						</view>;

					</radio-group>

				</view>
			</view>

			<hr style="margin: 0 30rpx;margin-top: 50rpx;" />









			<view class="inputContent1">
				<view class="inputLeft">居民签名</view>

				<view class="sing">
					<view>

						<view style="border: 1rpx solid #CCCCCC;margin-top: 19rpx;width: 600rpx;">
							<canvas class='firstCanvas' canvas-id="firstCanvas" @touchmove='move'
								@touchstart='start($event)' @touchend='end' @touchcancel='cancel' @longtap='tap'
								disable-scroll='true' @error='error'
								style="height: 150rpx;width: 280rpx;margin: 0 10rpx;">
							</canvas>
						</view>

					</view>

				</view>

				<view class="anewSing" @tap="anewSing">重新签名</view>
			</view>



			<view class="inputContent1" style="border: none;">
				<view class="inputLeft">拍照</view>

				<view class="camera" @tap="uploadImg">

					<view>
						<image src="../../static/images/camera.png" class="cameraImg"></image>

					</view>
					<view class="cameraFont">点击上传</view>
				</view>

			</view>




		</view>
		<view class="btnView" @tap="goFill">保存</view>
	</view>
</template>

<script>
	var content = null;
	var touchs = [];
	var canvasw = 0;
	var canvash = 0;
	var _that;
	//获取系统信息
	uni.getSystemInfo({
		success: function(res) {
			canvasw = res.windowWidth;
			canvash = res.windowHeight;
		},
	})
	export default {
		data() {
			return {
				signImage: '',
				isEnd: false,
				radio: '',
				Culture: '',
				CCupation: '',
				Marriagee: '',
				follow: '',
			}
		},
		onLoad() {
			_that = this
			//获得Canvas的上下文
			content = wx.createCanvasContext('firstCanvas')
			//设置线的颜色
			content.setStrokeStyle("#000")
			//设置线的宽度
			content.setLineWidth(5)
			//设置线两端端点样式更加圆润
			content.setLineCap('round')
			//设置两条线连接处更加圆润
			content.setLineJoin('round')
		},
		methods: {

			uploadImg() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
					success: (res) => {
						uni.uploadFile({
							url: this.$uploadFile + '/functions/uploadone',
							filePath: res.tempFilePaths[0],
							name: 'file',
							formData: {},
							success: (uploadFileRes) => {


							},
						});
					}
				});
			},

			anewSing() {
				// 设置为未签名
				this.isEnd = false
				//清除画布
				content.clearRect(0, 0, canvasw, canvash)
				content.draw(true)
			},

			// 画布的触摸移动开始手势响应
			start: function(event) {
				// console.log(event)
				console.log("触摸开始" + event.changedTouches[0].x)
				console.log("触摸开始" + event.changedTouches[0].y)
				//获取触摸开始的 x,y
				let point = {
					x: event.changedTouches[0].x,
					y: event.changedTouches[0].y
				}
				// console.log(point)
				touchs.push(point);

			},
			// 画布的触摸移动手势响应
			move: function(e) {
				let point = {
					x: e.touches[0].x,
					y: e.touches[0].y
				}
				// console.log(point)
				touchs.push(point)
				if (touchs.length >= 2) {
					this.draw(touchs)
				}
			},

			// 画布的触摸移动结束手势响应
			end: function(e) {
				console.log("触摸结束" + e)
				// 设置为已经签名
				this.isEnd = true
				// 清空轨迹数组
				for (let i = 0; i < touchs.length; i++) {
					touchs.pop()
				}

				if (this.isEnd) {
					uni.canvasToTempFilePath({
						canvasId: 'firstCanvas',
						success: function(res) {
							//打印图片路径
							console.log(res.tempFilePath)
							console.log('完成签名')
							//设置图片
							_that.signImage = res.tempFilePath

						}
					})
				}

			},

			//绘制
			draw: function(touchs) {
				console.log(touchs[0], touchs[1])
				let point1 = touchs[0]
				let point2 = touchs[1]
				touchs.shift()
				content.moveTo(point1.x, point1.y)
				content.lineTo(point2.x, point2.y)
				content.stroke()
				content.draw(true)
			},
			//清除操作
			clearClick: function() {
				// 设置为未签名
				this.isEnd = false
				//清除画布
				content.clearRect(0, 0, canvasw, canvash)
				content.draw(true)
			},

			// 画布的触摸取消响应
			cancel: function(e) {
				console.log("触摸取消" + e)
			},

			// 画布的长按手势响应
			tap: function(e) {
				console.log("长按手势" + e)
			},

			error: function(e) {
				console.log("画布触摸错误" + e)
			},

			RadioFollow(e) {
				this.follow = e.detail.value
			},
			RadioMarriagee(e) {
				this.Marriagee = e.detail.value
			},
			RadiooCCupation(e) {
				this.CCupation = e.detail.value
			},
			RadioCulture(e) {
				this.Culture = e.detail.value
			},
			RadioChange(e) {
				this.radio = e.detail.value
				console.log(this.radio)
			},
		}
	}
</script>

<style>
	.sing {
		display: flex;
		justify-content: center;
	}

	.cameraFont {
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;
		margin-left: 13rpx;
		margin-top: -5rpx;
	}

	.cameraImg {
		width: 36rpx;
		height: 28rpx;
	}

	.anewSing {
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FE0A0A;
		margin-top: 28rpx;
		margin-left: 25rpx;
	}

	.camera {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 610rpx;
		height: 170rpx;
		border: 1rpx solid #CCCCCC;
		margin: 0 auto;
		margin-top: 30rpx;
	}

	.inputLeft {
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;
	}

	.inputContent1 {
		padding: 18rpx 0 38rpx 18rpx;
		border-bottom: 1rpx solid #DCDCDC;
	}

	.btnView {
		width: 670rpx;
		height: 80rpx;
		background: #5396E0;
		border-radius: 40rpx;
		margin: 40rpx auto;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;

	}

	.radioFont {
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;
		margin-left: 10rpx;
		margin-bottom: 30rpx;
	}

	.radioView {
		padding: 30rpx 0 30rpx 26rpx;
	}

	.headView {
		border-bottom: 1rpx solid #BBBBBB;
		padding: 0 30rpx;
	}

	.formView {
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
		padding: 0 30rpx;
	}

	.headText {
		font-size: 36rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;
		text-align: center;
	}

	.inputView {
		width: 450rpx;
		height: 60rpx;
		border: 1rpx solid #BBBBBB;
		border-radius: 10rpx;
	}

	.borderView {
		width: 670rpx;
		border: 2rpx solid #BBBBBB;
		border-radius: 10rpx;
		margin: 0 auto;
		margin-top: 40rpx;
	}
</style>
